<template>
	<view class="content mainpadding" style="padding-bottom: 200rpx;">
		<view class="flexbetween">
			<view class="titletext xiaohong bold" v-show="dataAll.status==1">開具失敗</view>
			<view class="titletext xiaolv bold" v-show="dataAll.status==2">開具成功</view>
			<view class="titletext xiaohong bold" v-show="dataAll.status==3">作廢成功</view>
			<text class="weikai" v-if="dataAll.is_ly==1">未列印</text>
			<text class="yikai" v-if="dataAll.is_ly==2">已列印</text>
		</view>
		
		<view class="ffffff mainpadding margin_top flexbetween border2">
			<image class="invoiceImg margin_right3" v-if="dataAll.user" :src="dataAll.user.avatar_text" mode=""></image>
			<image class="invoiceImg margin_right3" v-if="dataAll.user==null" src="@/static/logo.png" mode=""></image>
			<view>
				<view class="color_ling text_w bold" v-if="dataAll.user">{{dataAll.user.nickname}}</view>
				<view class="color_ling text_w bold" v-if="dataAll.user==null">來店客戶</view>
			</view>
		</view>
		<view class="ffffff mainpadding border2 margin_top">
			<view class="submitbtn" v-show="returnDownShow()" style="width: 140rpx;background-color: #f5a83e;color: #333;font-size: 24rpx" @click="xiazai()">下載發票</view>
			<view class="flexbetween margin_top2 dingwei">
				<view class="text_b color_six line_b">{{dataAll.createtime_text}}</view>
				<image src="@/static/image/system/zhongjiang.png" v-if="dataAll.is_zj==1" style="width: 160rpx;height: 130rpx;position: absolute;top: -30rpx;right: 10rpx;" mode=""></image>
				<!-- <view class="huang_text  main_size bold " v-show="dataAll.paytype==1">
					點數支付
				</view>
				<view class="huang_text  main_size bold " v-show="dataAll.paytype==2">多元支付
				</view>
				<view class="huang_text  main_size bold " v-show="dataAll.paytype==3">現金支付
				</view>
				<view class="huang_text  main_size bold " v-show="dataAll.paytype==4">信用卡
				</view>
				<view class="huang_text  main_size bold " v-show="dataAll.paytype==5">Line Pay線上支付
				</view>
				<view class="huang_text  main_size bold " v-show="dataAll.paytype==6">街口線上支付
				</view>
				<view class="huang_text  main_size bold " v-show="dataAll.paytype==7">街口線下支付
				</view>
				<view class="huang_text  main_size bold " v-show="dataAll.paytype==8">Line Pay線下支付
				</view>
				<view class="huang_text  main_size bold " v-show="dataAll.paytype==9">Line Pay二維碼支付
				</view>
				<view class="huang_text  main_size bold " v-show="dataAll.paytype==10">街口二維碼支付
				</view>
				<view class="huang_text  main_size bold " v-show="dataAll.paytype==11">全支付線下支付
				</view> -->
			</view>
			<view class="titletext bold margin_top2 xiaohei" >{{dataAll.OrderId}}</view>
			<view class="flexbetween margin_top2">
				<view class="xiaolan smalltext bold lanlable" v-show="dataAll.type==0">紙本</view>
				<view class="xiaolan smalltext bold lanlable" v-show="dataAll.type==1">載具：{{dataAll.CarrierId1}}</view>
				<view class="xiaolan smalltext bold lanlable" v-show="dataAll.type==2">統編：{{dataAll.BuyerIdentifier}}</view>
				<view class="xiaolan smalltext bold lanlable" v-show="dataAll.type==3">捐贈：{{dataAll.NPOBAN}}</view>
				<view class="xiaolan smalltext bold ">發票號碼：{{dataAll.invoice_number}}</view>
			</view>
			<view class="xiaolan smalltext bold margin_top2" v-show="dataAll.type==2">統編名稱：{{dataAll.BuyerName}}</view>
			<view class="flexleft margin-top bold" style="width: 100%;">
				<view class="xiaohei titletext" style="width: 60%;">品名</view>
				<view class="xiaohei titletext flexcenter" style="width: 20%;">數量</view>
				<view class="xiaohei titletext flexright" style="width: 20%;">金額</view>
			</view>
			<view class="pdl">
				<view class="flexleft margin-top bold" style="width: 100%;" v-for="item in dataAll.ProductItem" :key="item.id">
					<view class="xiaohei titletext xiankuan" style="width: 60%;">{{item.Description}}</view>
					<view class="xiaohei main_size flexcenter bold" style="width: 20%;">*{{item.Quantity}}</view>
					<view class="color_theme main_size flexright bold" style="width: 20%;">{{item.Amount}}TX</view>
				</view>
			</view>
			<view class="flexright margin_top">
				<view class="bold" style="margin-right: 150rpx;">
					合計：
					<text class="price color_theme">{{dataAll.ProductItem.length}}項</text>
				</view>
				<view class="bold">
					銷售額：
					<text class="price color_theme">${{dataAll.SalesAmount1}}元</text>
				</view>
			</view>
			<view class="flexright margin_top bold">
				<view>
					稅金：
					<text class="price color_theme">${{dataAll.TaxAmount1}}元</text>
				</view>
			</view>
			<view class="flexright margin_top bold">
				<view>
					<text style="font-size: 36rpx;">總計：</text>
					<text class="price color_theme">${{dataAll.TotalAmount}}元</text>
				</view>
			</view>
			<view class="pdl"></view>
			<!-- <template v-if="dataAll.paytype!=4"> -->
				<view class="flexbetween margin_top bold">
					<view class="">{{returntext(dataAll.paytype)}}</view>
					<view class="price color_theme">${{dataAll.DebitAmount}}元</view>
				</view>
				<template v-if="dataAll.paytype==6 || dataAll.paytype==7">
					<view class="flexbetween margin_top bold">
						<view class="">街口幣折抵</view>
						<view class="price color_theme">${{dataAll.RedeemAmount}}元</view>
					</view>
					<view class="flexbetween margin_top bold">
						<view class="">街口券折抵</view>
						<view class="price color_theme">${{dataAll.StoreRedeemAmount}}元</view>
					</view>
				</template>
				<template v-if="dataAll.paytype==5 || dataAll.paytype==8">
					<view class="flexbetween margin_top bold">
						<view class="">LINE POINTS折抵</view>
						<view class="price color_theme">${{dataAll.RedeemAmount}}元</view>
					</view>
					<view class="flexbetween margin_top bold">
						<view class="">LINE 優惠券折抵 </view>
						<view class="price color_theme">${{dataAll.StoreRedeemAmount}}元</view>
					</view>
				</template>
			<!-- </template> -->
			<!-- <template v-if="dataAll.paytype==4">
				<view class="flexbetween margin_top bold">
					<view class="">聯信信用卡</view>
					<view class="price color_theme">${{dataAll.TotalAmount}}元</view>
				</view>
				<view class="flexbetween margin_top bold">
					<view class="">信用卡卡號</view>
					<view class="price color_theme">5415145****51212</view>
				</view>
			</template> -->
		</view>
		<view class="mainpadding posibottom" style="bottom: 0;">
			<view class="flexright flex-wrap">
				<view class="submitbtn margin-top" style="width: 25%;font-size: 24rpx;" @click="chongkai" v-if="dataAll.status==1">重新開具</view>
				<view class="submitbtn margin-top" style="width: 25%;background-color: #e56969;color: #fff;font-size: 24rpx;" @click="zuofei" v-if="dataAll.status==2">作廢發票</view>
				<view class="submitbtn margin-top" style="width: 25%;background-color: #f5a83e;color: #fff;font-size: 24rpx" v-if="dataAll.status==2 && returnDownShow()" @click="lieyin(1)">列印發票正本</view>
				<template v-if="dataAll.status!=3">
					<!-- 按作廢發票     3個按鈕要跟著隱藏，請收回原先的發票 銷毀  （要跳出 提醒 紅色的字 ）
					如果是紙本 開立成功  列印發票正本要隱藏
					如果是載具 統編 捐贈  列印發票正本要保留 之後如果有列印 就要 隱藏 -->
					<view class="submitbtn margin-top" style="width: 25%;background-color: #1c8ecb;color: #fff;font-size: 24rpx"  @click="lieyin(3)">列印發票明細</view>
					<view class="submitbtn margin-top" style="width: 25%;background-color: #50a6a3;color: #fff;font-size: 24rpx" @click="lieyin(2)">補印發票</view>
				</template>
			</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				listid: "",
				dataAll: {}
			}
		},
		onLoad(options) {
			this.listid = options.id
			this.getDetail()
		},
		methods: {
			returnDownShow(){
				if(this.dataAll.status==2){
					if(this.dataAll.type==0 && this.dataAll.is_download==0 && this.dataAll.is_ly==1){
						return true
					}
					if(this.dataAll.type==1 && this.dataAll.is_zj==1 && this.dataAll.is_download==0 && this.dataAll.is_ly==1){
						return true
					}
					if(this.dataAll.type==2 || this.dataAll.type==3){
						return true
					}
				}
			},
			returntext(val){
				if(val==1)return "點數支付"
				if(val==2)return "多元支付"
				if(val==3)return "現金支付"
				if(val==4)return "信用卡"
				if(val==5)return "linepay線上支付"
				if(val==6)return "街口線上支付"
				if(val==7)return "街口線下支付"
				if(val==8)return "linepay線下支付"
			},
			returnfplx(val){
				if(val==0)return "紙本"
				if(val==1)return "載具"
				if(val==2)return "統編"
				if(val==3)return "捐贈"
			},
			xiazai(){
				let url = '/api/user/downloadFile'
				httpRequest.request(url, 'GET', {
					id: this.listid,
				}, false, false, true).then(res => {
					if(res.code==1){
						var iframe = document.createElement('iframe');
						iframe.style.display = 'none';
						iframe.src = "javascript: '<script>location.href=\"" + res.data.tbinfo + "\"<\/script>'";
						document.getElementsByTagName('body')[0].appendChild(iframe);
						this.getDetail()
					}else{
						httpRequest.toast(res.msg)
					}
					
				})
			},
			getDetail() {
				let data = {
					id: this.listid,
				}
				let url = '/api/shop/shopFpDetail'
				httpRequest.request(url, 'GET', data, false, false, true).then(res => {
					this.dataAll = res.data
				})
			},
			chongkai(){
				let data = {
					id: this.listid,
				}
				let url = '/api/shop/cxKjUserShop'
				httpRequest.request(url, 'GET', data, false, false, true).then(res => {
					httpRequest.toast(res.msg)
					if(res.code==1){
						this.getDetail()
					}
				})
			},
			lieyin(type){
				let data = {
					id: this.listid,
					type,
				}
				let url = '/api/shop/dyFp'
				httpRequest.request(url, 'GET', data, false, false, true).then(res => {
					httpRequest.toast(res.msg)
					if(res.code==1){
						this.getDetail()
					}
				})
			},
			zuofei(){
				let data = {
					id: this.listid,
				}
				let url = '/api/shop/cancelShopFp'
				httpRequest.request(url, 'GET', data, false, false, true).then(res => {
					httpRequest.toast(res.msg)
					if(res.code==1){
						this.getDetail()
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.pdl{
		border-bottom: 2rpx dashed #333;
	}
	.weikai{
		border-radius: 0 10rpx 0 10rpx;
		background-color: rgba(153, 153, 153, .1);
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999;
		padding: 5rpx 30rpx;
	}
	.yikai{
		border-radius: 0 10rpx 0 10rpx;
		background-color: #50a6a3;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #fff;
		padding: 5rpx 30rpx;
	}
	.invoiceImg {
		width: 120rpx;
		height: 120rpx;
		min-width: 120rpx;
		border-radius: 50%;
	}

	.color_theme {
		color: #FF5C00 !important;
	}

	.goodsImg {
		width: 124rpx;
		height: 124rpx;
		border-radius: 14rpx 14rpx 14rpx 14rpx;
	}

	.pirce {
		font-size: 30rpx;
		font-family: DIN Next LT Pro-Regular, DIN Next LT Pro;
		font-weight: 400;
		color: #666666;
	}
</style>